<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom</title>
    <style>
        .display {
            display: none;
        }
    </style>
</head>
<body>
    <!-- 一个div就是一个Element元素 -->
    <div class="box"></div>
    <img src="./images/off.png" alt="" id="light">
    <script>
        // 通过document获取元素
        let titles = document.getElementsByTagName("title");
        let box = document.getElementsByClassName("box")[0]
        let light = document.getElementById("light")
        // classList 属性  获取元素的所有class属性值
        let classList = box.classList
        // add 函数 可以添加一个 class属性值
        // box.classList.add('display')
        console.log(classList);
        console.log(light.src);
        // 两秒之后让图片换成亮灯的
        // setTimeout(function() {
        //     light.src = "./images/on.png"
        // },2000)
        box.innerText = new Date().toLocaleString()
        let count = 0;
        setInterval(function() {
            box.innerText = new Date().toLocaleString()
            if (count % 2 == 0) {
                light.src = "./images/on.png"
                count ++;
                return
            }
            light.src = "./images/off.png"
            count = 0
        }, 1000)
        // 操作元素的属性
        titles[0].innerText = "world"
        console.log(titles[0].innerText);
    </script>
</body>

</html>